<template>
  <u-popup
    :show="visible"
    mode="center"
    mask="true"
    bg-color="#000"
    width="100%"
    height="100vh"
  >
    <view class="preview">
      <view
        class="back-icon"
        @click="goback"
      >
        <u-icon
          class="left-icon"
          name="close"
          color="#fff"
          size="30"
        ></u-icon>
      </view>
      <swiper
        style="
          display: flex;
          align-items: center;
          justify-content: center;
          height: 100%;
        "
        :current="previewIndex"
        :indicator-dots="false"
        @change="onChange"
      >
        <swiper-item
          v-for="(item, index) in fileList"
          :key="index"
          class="detail-swiper"
          @longpress="savePicture(item.url, item.type)"
        >
          <view
            v-if="item.type === 'video'"
            class="video-bg"
            @click="togglePlayPause(index)"
          >
            <view
              v-if="!isPlaying"
              class="video-icon"
            >
              <text
                class="iconfont icon-zuojiantou is-video"
                style="color: #fff; font-size: 12px"
              ></text>
            </view>
            <view class="video-cover"></view>
            <video
              :id="`video-${index}`"
              class="video"
              :src="item.url"
              :controls="controls"
              :muted="mute"
              :poster="`${item.poster}`"
              :autoplay="index === 0"
              @play="handlePlay"
              @pause="handlePause"
              @ended="handleEnded"
            ></video>
          </view>
          <image
            v-else
            class="image2"
            :src="item.poster"
            mode="aspectFit"
          />
        </swiper-item>
      </swiper>
    </view>

    <u-popup
      :show="savevisible"
      mode="bottom"
      mask="true"
      bg-color="#FAFAFA;"
      height="500px"
      border-radius="14"
    >
      <view class="save">
        <view
          class="save-text"
          @click="downloadPicture"
        >
          保存到相册
        </view>
        <view
          class="save-text"
          @click="savevisible = false"
        >
          取消
        </view>
      </view>
    </u-popup>
  </u-popup>
</template>

<script>
import { downloadFile } from '@/utils/fileUtil.js';
export default {
  props: {
    value: {
      type: Boolean,
      value: false,
    },
    fileList: {
      type: Array,
    },
    previewIndex: {
      type: Number,
    },
    petType: {
      type: String,
    },
  },
  data() {
    return {
      mute: false,
      controls: false,
      isPlaying: false,
      savevisible: false,
      fileUrl: '',
      fileType: '',
    };
  },
  computed: {
    visible: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      },
    },
  },
  watch: {
    visible(val) {
      if (val) {
        console.log('fileList', this.fileList);
      }
    },
  },
  mounted() {
    uni.$on('saveFileSuccess', () => {
      this.savevisible = false;
    });
  },
  beforeDestroy() {
    uni.$off('saveFileSuccess');
  },
  methods: {
    downloadPicture() {
      downloadFile(this.fileUrl, this.fileType === 'video');
    },
    //长按保存到相册
    savePicture(url, type) {
      console.log('url', url);
      if (this.petType === 'diary') {
        this.fileUrl = url;
        this.fileType = type;
        this.savevisible = true;
      }
    },
    handlePlay() {
      this.isPlaying = true;
    },
    handlePause() {
      this.isPlaying = false;
    },
    handleEnded() {
      this.isPlaying = false;
    },
    togglePlayPause(index) {
      const videoContext = uni.createVideoContext(`video-${index}`);
      if (this.isPlaying) {
        videoContext.pause(); // 暂停视频
      } else {
        videoContext.play(); // 开始播放视频
      }
    },
    goback() {
      this.visible = false;
    },
    onShow() {
      this.currIndex = 0;
    },
    onChange(e) {
      const files = this.fileList;
      if (
        this.currIndex !== undefined &&
        files[this.currIndex].type === 'video'
      ) {
        const videoContext = uni.createVideoContext(`video-${this.currIndex}`);
        videoContext.pause();
        // 判断正在展示的是否为视频
        // this.selectComponent('#video_' + this.currIndex).pause();
      }
      this.currIndex = e.detail.current;
      // 判断即将展示的是否为视频
      if (files[e.detail.current].type === 'video') {
        const videoContext = uni.createVideoContext(`video-${this.currIndex}`);
        videoContext.play();
      }
    },
  },
};
</script>

<style lang="scss">
.u-popup {
  z-index: 1000; /* 确保这个值高于tabBar的z-index */
}
.save {
  padding: 0px 8px;
  box-sizing: border-box;
  .save-text {
    background: #ffffff;
    border-radius: 12px;
    font-weight: 400;
    font-size: 16px;
    color: #333333;
    width: 100%;
    padding: 16px 0px;
    text-align: center;
    margin-top: 10px;
  }
}
.preview {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  .back-icon {
    position: absolute;
    top: 30px;
    left: 20px;
    z-index: 999;
  }
  .detail-swiper {
    overflow: hidden;
    position: relative;
    .video-bg {
      .video-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 99999;
        .is-video {
          width: 30px;
          height: 30px;
          background: #00000080;
          border-radius: 30px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
      .video-cover {
        width: 100%;
        height: 500px;
        position: absolute;
        background-color: transparent;
        z-index: 1000 !important;
      }
      .video {
        width: 100%;
        height: 100%;
        position: absolute;
      }
    }
    .image2 {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
    }
  }
}
</style>
